<template>
    <div class="chat_container">
        <div class="chat_contents">
            <div class="left">
                <div class="header">
                    <div class="title">会员中心</div>
                    <div class="english">MEMBER CENTER</div>
                </div>
                <div class="bottom">
                    <div :class="navIndex == item.title ? 'bottom_items_active' : 'bottom_items'"
                        v-for="(item, index) in navlist" :key="index" @click="navClick(item)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <huiyuan v-if="navIndex == '会员中心'"></huiyuan>
            <geren v-if="navIndex == '个人中心'"></geren>
            <yilian v-if="navIndex == '每日一练'"></yilian>
            <quanzi v-if="navIndex == '我的圈子'"></quanzi>
            <jiucuo v-if="navIndex == '我的纠错'"></jiucuo>
            <tiku v-if="navIndex == '我的题库'"></tiku>
            <jingsai v-if="navIndex == '我的竞赛'"></jingsai>
            <xueqing v-if="navIndex == '我的学情'"></xueqing>
            <dengji v-if="navIndex == '我的等级'"></dengji>
            <!-- <shangcheng v-if="navIndex == '商城管理'"></shangcheng> -->
            <jifen v-if="navIndex == '我的积分'"></jifen>
            <shoucang v-if="navIndex == '我的收藏'"></shoucang>
            <dianliang v-if="navIndex == '我的点亮'"></dianliang>
        </div>
    </div>
</template>
<script setup lang="ts">
import huiyuan from './components/huiyuan.vue'
import geren from './components/geren.vue'
import dianliang from './components/dianliang.vue'
import shoucang from './components/shoucang.vue'
import jifen from './components/jifen.vue'
import shangcheng from './components/shangcheng.vue'
import dengji from './components/dengji.vue'
import xueqing from './components/xueqing.vue'
import jingsai from './components/jingsai.vue'
import tiku from './components/tiku.vue'
import jiucuo from './components/jiucuo.vue'
import quanzi from './components/quanzi.vue'
import yilian from './components/yilian.vue'
const navlist = ref([
    { title: '会员中心', tos: '' },
    { title: '个人中心', tos: '' },
    { title: '每日一练', tos: '' },
    { title: '我的圈子', tos: '' },
    { title: '我的纠错', tos: '' },
    { title: '我的题库', tos: '' },
    { title: '我的竞赛', tos: '' },
    { title: '我的学情', tos: '' },
    { title: '我的等级', tos: '' },
    // { title: '商城管理', tos: '' },
    { title: '我的积分', tos: '' },
    { title: '我的收藏', tos: '' },
    { title: '我的点亮', tos: '' },
])
const navIndex = ref('会员中心')

const navClick = (item) => {
    navIndex.value = item.title
}

</script>
<style scoped lang="scss">
.chat_container {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f5f7fa;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    box-sizing: content-box;
    padding-top: 100px;

    .chat_contents {
        width: 1400px;
        height: calc(100% - 60px);
        margin-top: 30px;
        background: #FFFFFF;
        box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.09);
        border-radius: 20px;
        box-sizing: border-box;
        padding: 40px 50px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;

        .left {
            width: 313px;
            height: 100%;

            .header {
                width: 313px;
                height: 107px;
                border-radius: 10px 10px 0px 0px;
                background-color: #22AFE5;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                box-sizing: border-box;
                padding: 30px 0;

                .title {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 36px;
                    color: #FFFFFF;
                    margin-right: 10px;
                }

                .english {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #A4E1F8;
                }
            }

            .bottom {
                width: 100%;
                height: calc(100% - 107px);
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                border-radius: 0px 0px 10px 10px;
                border: 1px solid #E6E6E6;
                overflow-y: auto;
                overflow-x: hidden;

                .bottom_items {
                    width: 90%;
                    margin-left: 5%;
                    text-align: center;
                    color: #858585;
                    font-weight: 400;
                    font-size: 18px;
                    border-bottom: 1px solid #E6E6E6;
                    height: 60px;
                    line-height: 60px;
                    cursor: pointer;
                }

                .bottom_items_active {
                    width: 90%;
                    margin-left: 5%;
                    text-align: center;
                    color: #000000;
                    font-weight: 500;
                    font-size: 18px;
                    border-bottom: 1px solid #E6E6E6;
                    height: 60px;
                    line-height: 60px;
                    cursor: pointer;
                }
            }
        }


    }
}
</style>